window.addEventListener('load', function () {

  const user = {
    name: '清风徐来',
    avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    vip: true,
  }

 let data = [
    {
      id: 100,
      name: '__RichMan',
      avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
      content:
        '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
      time: new Date('2022/10/12 10:10:23'),
      vip: true,
      collect: false,
    },
    {
      id: 101,
      name: '糖蜜甜筒颖',
      avatar:
        'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
      content:
        '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
      time: new Date('2019/02/23 15:12:44'),
      vip: false,
      collect: true,
    },
    {
      id: 102,
      name: '清风徐来',
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
      content:
        '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
      time: new Date('2021/07/01 00:30:51'),
      vip: true,
      collect: false,
    },
  ]



  // 获取元素
  const textarea = document.querySelector('textarea') // 文本域
  const btn = document.querySelector('.btn') // 点击的btn
  const word = document.querySelector('.word') // 字数 0/100
  const list = document.querySelector('.comm-list') // ul
  const sub = document.querySelector('.comm-head sub') // 热评的数量

  // 1 将数据渲染到页面
  render()


  //2 给评论添加点击事件
  list.addEventListener('click', function (e) {
    // 1 点赞 点击的标签而且类名一定要有iconfont
    // 点赞更改的是数据 数据改变渲染页面
    if (e.target.tagName === 'SPAN' && e.target.classList.contains('iconfont')) {
      // 使用自定义事件 需要现在的渲染函数绑定再点击事件获取
      const i = +e.target.dataset.index //

      // 等号右边取反在赋值给左边
      data[i].collect = !data[i].collect
      //数据改变 调用渲染函数
      render()
    }
    //点击的是
    if (e.target.tagName === 'SPAN' && e.target.classList.contains('del')) {
      console.log('11');
      const i = +e.target.dataset.index
      console.log("i", i)
      data.splice('i', 1)
      //数据改变 调用渲染函数
      render()
    }

  })


  // 3) 添加模块
  // 3.1文字检测
  textarea.addEventListener('input', function () {
    console.log('11');

    word.innerHTML = `${textarea.value.length}/200字`
  })

  // 3.2点击发布
  btn.addEventListener('click', function () {

    if (!textarea.value.trim()) {
      textarea.value = ''
      return alert('请输入合法内容')
    }
    const user = {
      name: '清风徐来',
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
      vip: true,
      time: new Date(),
      content: textarea.value,
      collect: false, // 否否点赞
    }
    // 清空文本框
    textarea.value = ''
    // 将创建的对象放入数组中
    data.unshift(user)
    // 数据改变了调用render函数
    render()

  })


  //将数据渲染到页面
  function render() {
    sub.innerHTML = `${data.length}`
    const htmlArr = data.map(function (item, i) {
      return `
      <li class="comm-item">
      <div class="avatar" style="background-image: url('${item.avatar}');"></div>
      <div class="info">
        <p class="name vip">
        ${item.name}
        ${item.vip ? `<img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />` : ''}  
         
        </p>
        <p class="time">
          <span>${item.time.toLocaleString()}</span>
          ${item.collect ? `<span class="iconfont icon-collect-sel" data-index = '${i}'></span>` : `<span class="iconfont icon-collect" data-index = '${i}'></span>`} 
          ${item.name === user.name ? `<span class="del" data-index = '${i}'>删除</span> ` : ''}
          
        </p>
        <p>
        ${item.content}
        </p>
      </div>
    </li> 
      
      `
    })
    // console.log("htmlArr", htmlArr)
    list.innerHTML = htmlArr.join('')


  }

  //附加功能 时间升序降序
  let spans = document.querySelectorAll('.hot span')

  // 备份默认的，如果没有排序，那么就是默认的
  let defaultComments = [...data]
  for (let i = 0; i < spans.length; i++) {
    spans[i].addEventListener('click', function (e) {
      document.querySelector('.hot .active').classList.remove('active')
      // e.target.classList.add('active')
      spans[i].classList.add('active')
      //默认
      //时间升序
      if (i === 1) {
        data.sort(function (a, b) {
          return b.time - a.time
        })
      } else if (i === 2) {
        //时间降序
        data.sort(function (a, b) {
          return a.time - b.time
        }) 
      }else {
        data = [...defaultComments]
      }
      render()

    })

  }

})

